<template>
  <div class="flex justify-center flex-col">
    <div class="flex justify-center mb-[20px]">
      <el-button
        v-for="option in options"
        :key="option.value"
        size="large"
        @click="changeSearchType(option.value)"
      >
        {{ option.label }}
      </el-button>
    </div>
    <div style="display: flex;justify-content: flex-start; width: 100%; flex-wrap: wrap;">
      <div
        v-for="(video, index) in filteredVideos"
        :key="index"
        class="video-item"
      >
        <Video :videoData="video"></Video>
      </div>
    </div>
  </div>

</template>


<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue'
import service from '../../service/service'
import Video from '../../components/videoComponents.vue'

import { useVideoStore } from '../../stores/video'
const videoStore = useVideoStore()
onMounted(() => {
  videoStore.getAllVideo()
  filteredVideos.value = videoStore.showVideo
})

const options = [
  { value: '', label: '全部' },
  { value: '工学', label: '工学' },
  { value: '理学', label: '理学' },
  { value: '历史学', label: '历史学' },
  { value: '会计学', label: '会计学' },
  { value: '经济学', label: '经济学' },
  { value: '艺术学', label: '艺术学' },
  { value: '教育学', label: '教育学' },
  { value: '哲学', label: '哲学' },
  { value: '文学', label: '文学' },
  { value: '法学', label: '法学' },
  { value: '管理学', label: '管理学' },
  { value: '医学', label: '医学' },
  { value: '农学', label: '农学' },
]

const videos = computed(() => videoStore.showVideo)
watch(videos, (newValue) => {
  filteredVideos.value = newValue
})
const filteredVideos = ref(videos.value)
const searchType = ref('')
const changeSearchType = (value: any) => {
  searchType.value = value
  if (searchType.value !== '') {
    filteredVideos.value = videos.value.filter((video) => video.type === value)
  } else {
    filteredVideos.value = videos.value
  }
}
</script>

<style scoped>
.video-item {
  width: calc(25% - 10px); /* 每行四个，宽度为四分之一并留有一些间距 */
  margin-bottom: 20px; /* 调整间距 */
  display: flex;
  justify-content: center;
}
</style>